<template>
    <div class="menudiv sub-div-center">
        <a v-for="(item,index) in data" href="#">
            <div :class="`aitme sub-div-center ${index==activeIndex ? 'clickclass' : '' }`" tabindex="0" @click="changecss(index)">
                {{ item.name }} 
                <el-icon v-if="item.list.length" size="0.8rem" :color="color" style="margin-left: 0.5rem;">
                    <ArrowDownBold />
                </el-icon>
            </div>
            <div class="dropdown-content" v-show="(index==activeIndex) && isshow" v-if="item.list.length"  >
                <a  v-for="(subitem,itemidx)  in item.list" @click="closeitemdiv()" href="#" >{{ subitem.name }}</a>
            </div>
        </a>
    </div>

</template>
<script setup>
import {ref} from 'vue';
import { ArrowDownBold } from '@element-plus/icons-vue'
const activeIndex = ref(-1)
const isshow = ref(true)
var data = [
    {name:'Home',list:[],url:''},
    {name:'About',list:[{name:'AAA',url:''},{name:'BBB',url:''}],url:''},
    {name:'Truck Parts',list:[],url:''},
    {name:'Trucks',list:[],url:''},
    {name:'Service',list:[],url:''},
    {name:'News',list:[],url:''},
    {name:'Contace us',list:[],url:''},
    {name:'English',list:[{name:'English',url:''},{name:'中文',url:''}],url:''},
]

function changecss(index){
    activeIndex.value = index;
    isshow.value = true;
    activeItemIdx.value=-1;
}

function closeitemdiv(){
    isshow.value = false;
}

</script>
<style scoped>
    .menudiv{
        width: 100%;
        height: 3.2rem;
        margin-top: 2rem;
        background-color: var(--color-0);
    }
    a{
        text-decoration: none;
    }
    .aitme{
        font-size: 1.15rem;
        font-weight: 600;
        color:white;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
        height: 3.2rem;
        display: flex;
    }

    .aitme:hover{
        background-color: #eee;;
        border-bottom: #000 solid 2px ;
        color: #000;
    }
    .clickclass{
        background-color: #eee;;
        border-bottom: #000 solid 2px ;
        color: #000;
    }


    .dropdown-content {
        margin-top: 5px;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        /* box-shadow: 0px 8px 16px rgba(0,0,0,0.2); */
        z-index: 1000;
        border-radius: 4px;
        border: #000;
    }
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
</style>